<template>
	<view class="content">
		<view class="image">
			<div class="top">
				<text>鸭梨会员</text>
			</div>
			<image src="~@/static/topBanner.png" mode=""></image>
			<view class="circle">
				<text>Tx</text>
			</view>
		</view>
		<view class="container">
			<view class="info">
				<view class="left">
					<text>进击的小赵</text>
					<text>2021.07.01 加入哩克</text>
				</view>
				<view class="right">
					<text>52<text>（张）</text></text>
					<text>优惠券</text>
				</view>
			</view>
			<ul class="">
				<li></li>
			</ul>
		</view>
		
	</view>
</template>

<script setup></script>

<style lang="scss">
.content {
	height: 100vh;
	.image {
		width: 100%;
		height: 360rpx;
		position: relative;
		.top {
			width: 100%;
			height: 272rpx;
			background-color: #000;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			text {
				color: #fff;
				margin-right: 60rpx;
				font-size: 48rpx;
			}
		}
		image {
			width: 100%;
			height: 100%;

			&::after {
				content: 'Tx';
				color: #fff;
				font-size: 24px;
				text-align: center;
			}
		}
		.circle {
			width: 122rpx;
			height: 122rpx;
			border-radius: 50%;
			background-color: #000;
			position: absolute;
			bottom: -52rpx;
			left: 63rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 56rpx;
			font-weight: 700;
		}
	}
	.container{
		padding: 0 60rpx;
		.info {
			margin-top: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: 60rpx;
			border-bottom: 1rpx solid #F7F8FB;
			.left {
				display: flex;
				flex-direction: column;
				text {
					font-family: 'è‹¹æ–¹ ç²—ä½“', 'è‹¹æ–¹ å¸¸è§„', 'è‹¹æ–¹';
					font-weight: 700;
					font-style: normal;
					font-size: 48rpx;
					color: #000;
					&:nth-child(2) {
						font-family: 'è‹¹æ–¹ å¸¸è§„', 'è‹¹æ–¹';
						font-weight: 400;
						font-style: normal;
						font-size: 24rpx;
						color: #b9bfd3;
						margin-top: 16rpx;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text {
					font-family: 'è‹¹æ–¹ ç²—ä½“', 'è‹¹æ–¹ å¸¸è§„', 'è‹¹æ–¹';
					font-weight: 700;
					font-style: normal;
					font-size: 100rpx;
					color: #ec6b1f;
					line-height: 100%;
					text {
						font-family: 'è‹¹æ–¹ å¸¸è§„', 'è‹¹æ–¹';
						font-weight: 400;
						font-style: normal;
						font-size: 24rpx;
						color: #b5b5c3;
					}
					&:nth-child(2) {
						margin-top: 12rpx;
						font-family: 'è‹¹æ–¹ å¸¸è§„', 'è‹¹æ–¹';
						font-weight: 400;
						font-style: normal;
						font-size: 24rpx;
						color: #b9bfd3;
						margin-left: 24rpx;
						height: 28rpx;
					}
				}
			}
		}
	}

}
</style>
